<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>table下拉选择器</title>
    <link href="/URMS/lib/layui-v2.5.5/css/layui.css" media="all" rel="stylesheet">
    <link href="/URMS/css/public.css" media="all" rel="stylesheet">
</head>
<body>
<div class="layuimini-container" style="text-align: center">

    <div class="layuimini-main" style="display:inline-block;width:700px;">
        <!-- 示例-970 -->
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>菜单添加</legend>
        </fieldset>

        <form action="" class="layui-form">
            <input id="parentid" name="parentid" th:value="${editMenu.parentid}" type="hidden">
            <input id="id" name="id" th:value="${editMenu.id}" type="hidden">
            <input id="createdate" name="createdate" th:value="${editMenu.createdate}" type="hidden">
            <input id="modifydate" name="modifydate" th:value="${editMenu.modifydate}" type="hidden">
            <input id="sortcode" name="sortcode" th:value="${editMenu.sortcode}" type="hidden">
            <div class="layui-form-item">
                <label class="layui-form-label" for="tree-Select">上级菜单</label>
                <div class="layui-input-block">
                    <p th:if="${editMenu.parentid==0}">
                        <input class="layui-input" id="tree-Select" readonly="true" type="text" value="根目录">
                    </p>
                    <p th:if="${editMenu.parentid!=0}">
                        <input class="layui-input" id="tree-Select" lay-filter="tree" type="text">
                    </p>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">菜单类别</label>
                <div class="layui-input-block" th:switch="${editMenu.menutype}">
                    <p th:case="'0'">
                        <input checked name="menutype" title="目录" type="radio" value="0">
                        <input name="menutype" title="菜单" type="radio" value="1">
                        <input name="menutype" title="按钮" type="radio" value="2">
                    </p>
                    <p th:case="'1'">
                        <input name="menutype" title="目录" type="radio" value="0">
                        <input checked name="menutype" title="菜单" type="radio" value="1">
                        <input name="menutype" title="按钮" type="radio" value="2">
                    </p>
                    <p th:case="'2'">
                        <input name="menutype" title="目录" type="radio" value="0">
                        <input name="menutype" title="菜单" type="radio" value="1">
                        <input checked name="menutype" title="按钮" type="radio" value="2">
                    </p>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" lay-verify="title" name="name"
                           placeholder="请输入菜单名" th:value="${editMenu.name}" type="text">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">权限标识</label>
                <div class="layui-input-block">
                    <input autocomplete="off" class="layui-input" lay-verify="title" name="appurl" placeholder="请输入标题"
                           th:value="${editMenu.appurl}" type="text">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label" for="imgurl">默认图标</label>
                <div class="layui-input-block">
                    <input class="hide" id="imgurl" lay-filter="iconPicker" style="display: none;"
                           th:value="${editMenu.imgurl}" type="text" value="layui-icon-face-smile-fine">

                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block" th:switch="${editMenu.status}">
                    <p th:case="'1'">
                        <input checked="checked" lay-skin="switch" lay-text="ON|OFF" name="status"
                               type="checkbox">
                    </p>
                    <p th:case="'0'">
                        <input lay-skin="switch" lay-text="ON|OFF" name="status" type="checkbox">
                    </p>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-filter="demo1" lay-submit="saveBtn">立即提交</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script charset="utf-8" src="/URMS/lib/layui-v2.5.5/layui.js"></script>
<script charset="utf-8" src="/URMS/js/lay-config.js?v=1.0.4"></script>
<script>


    layui.use(["treeSelect", "iconPickerFa", "form", "tree", "layer"], function () {
        var form = layui.form,
            tree = layui.tree,
            $ = layui.jquery,
            layer = layui.layer,
            treeSelect = layui.treeSelect,
            iconPickerFa = layui.iconPickerFa;

        treeSelect.render({
            // 选择器
            elem: '#tree-Select',
            // 数据
            data: '/URMS/sysMenu/treeMenu',
            // 异步加载方式：get/post，默认get
            type: 'post',
            // 占位符
            placeholder: '修改默认提示信息',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 点击回调
            click: function (d) {
                if ($("#parentid").val() == 0) {
                    alert("更目录不可以更改!");

                    $("#tree-Select").attr("disabled", true);
                } else {
                    $("#parentid").val(d.current.id);
                }
            },
            // 加载完成后的回调函数
            success: function (d) {
                // 选中节点，根据id筛选

                // 获取zTree对象，可以调用zTree方法
                if ($("#parentid").val() != "" && $("#parentid").val() != 0) {
                    treeSelect.checkNode('tree', $("#parentid").val());
                } else {
                    if ($("#parentid").val() == 0) {
                        $("#tree-Select").attr("disabled", true);
                    }
                }
                // 刷新树结构
                treeSelect.refresh();
            }
        });

        iconPickerFa.render({
            // 选择器，推荐使用input
            elem: '#imgurl',
            // fa 图标接口
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',
            // 是否开启搜索：true/false，默认true
            search: true,
            // 是否开启分页：true/false，默认true
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                console.log(data);
            },
            // 渲染成功后的回调
            success: function (d) {
                console.log(d);
            }
        });

        form.on('switch(status)', function (data) {
            //开关是否开启，true或者false
            var checked = data.elem.checked;
            //获取所需属性值

            if (checked != checked) {
                data.elem.checked = checked;
            } else {
                data.elem.checked = !checked;
            }
            form.render();
        });

        //监听提交
        form.on('submit(demo1)', function (data) {

            if (data.field.status == "on") {
                data.field.status = "1";
            } else {
                data.field.status = "0";
            }
            let menu = data.field
            confirm(JSON.stringify(data.field))

            $.ajax({
                url: "/URMS/sysMenu/modifySubmit",
                data: menu,
                type: "POST",
                async: false,
                dataType: "JSON",
                success: function (data) {
                    if (data == "添加成功") {
                        layer.msg("添加成功");

                    } else if (data == "添加失败") {
                        layer.msg("添加失败")
                    } else {
                        layer.msg("添加出错1")
                        return false
                    }
                }
            })
            layer.confirm(JSON.stringify(data.field), function () {
                '最终的提交信息'

            })
        });
    })
</script>
</body>
</html>

